<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广告小弹窗</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="./popUpAd.css">
</head>
<body style="min-width:1280px;">
    <div class="popupad-wrap">
        <div class="save-btn">
            <button class="layui-btn layui-btn-sm layui-btn-normal btn-save">保存</button>
        </div>
        <div class="popupad-set-wrap">
            <div>
                <div class="show-head">
                    <img src="http://xiaowei.xy-asia.com/Public/User/Addons/MiniProgram/widget_config/images/head.png" alt="模拟小程序状态栏">
                    <div>欢迎光临小微</div>
                </div>
                <div class="show-body">
                    <canvas id="showBodyCanvas" width="375" height="667"></canvas>
                    <div class="show-body-view">
                        <div class="show-img-wrap">
                            <img src="" alt="ad">
                            <div class="img-wrap-btn-one" style="display: none;">
                                <div><i class="layui-icon layui-icon-close"></i></div>
                            </div>
                            <div class="img-wrap-btn-two position-close-btn" style="display:none;"><i class="layui-icon layui-icon-close"></i></div>
                            <div class="position-center-btn"><i class="layui-icon layui-icon-align-center"></i></div>
                        </div>
                    </div>

                </div>
            </div>
            <div>
              <form class="layui-form" lay-filter="popUpAdForm" onsubmit="return false">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                      <li class="layui-this">基本信息设置</li>
                      <li>弹窗内容设置</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">浮窗名称</label>
                                    <div class="layui-input-inline" style="width:392px;">
                                        <input type="text" name="layerName" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">介绍</label>
                                    <div class="layui-input-inline" style="width:392px;">
                                        <textarea name="desc"  placeholder="" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">生效日期</label>
                                    <div class="layui-input-inline" style="width:180px;">
                                        <input type="text" class="layui-input" id="takeEffectBegin">
                                    </div>
                                    <div class="layui-form-mid">---</div>
                                    <div class="layui-input-inline" style="width:180px;">
                                        <input type="text" class="layui-input" id="takeEffectEnd">
                                    </div>
                                </div>
                                <div class="active-effect">
                                <div class="layui-inline">
                                    <label class="layui-form-label">显示时段</label>
                                    <div class="layui-input-inline" style="width:180px;">
                                    <input type="text" name="showBeginTime"  placeholder="--:--" autocomplete="off" class="layui-input datetime">
                                    </div>
                                    <div class="layui-form-mid">---</div>
                                    <div class="layui-input-inline"  style="width:180px;">
                                    <input type="text" name="showEndTime"  placeholder="--:--" autocomplete="off" class="layui-input datetime">
                                    </div>
                                    <div class="layui-input-inline" style="width:80px;">
                                        <button type="button" class="layui-btn layui-btn-normal add-btn-js">
                                            <i class="layui-icon">&#xe654;</i>添加
                                        </button>
                                    </div>
                                </div>
                                </div>
                                <div class="layui-inline" style="margin-bottom:10px;">
                                    <label class="layui-form-label">可见群体</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="visibleGroup" value="" data-value="all" data-type="visibleGroup" lay-filter="unify-radio" title="所有人">
                                        <input type="radio" name="visibleGroup" value="" data-value="member" data-type="visibleGroup" lay-filter="unify-radio" title="会员等级">
                                        <input type="radio" name="visibleGroup" value="" data-value="group" data-type="visibleGroup" lay-filter="unify-radio" title="会员群体">
                                    </div>
                                </div>
                                <div class="layui-inline member-group-js" style="display:none;margin-bottom:10px;">
                                    <label class="layui-form-label">会员群体选择</label>
                                    <div class="layui-input-inline" style="width:200px;">
                                        <button id="add-member-group-js" class="layui-btn layui-btn-normal layui-btn-sm" type="button" style="margin-top:4px;"><i class="layui-icon">&#xe654;</i>添加</button>
                                        <button id="memberGroupTextWrap" class="layui-btn layui-btn-normal layui-btn-sm" type="button" style="display:none;margin-top:4px;"><i id="memberGroupClose" class="layui-icon">&#x1006;</i></button>
                                    </div>
                                </div>
                                <div class="layui-inline member-classify-js" style="display: none;margin-bottom:10px;">
                                    <label class="layui-form-label">会员等级选择</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="memberClass" value="all" title="A等级">
                                        <input type="radio" name="memberClass" value="member" title="B等级">
                                        <input type="radio" name="memberClass" value="group" title="C等级">
                                    </div>
                                </div>

                                <div class="layui-inline" style="margin-bottom:10px;">
                                    <label class="layui-form-label">显示页面</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" lay-filter="unify-checkbox" value="" data-value="1" data-type="showPage" name="showPage[home]" title="首页" lay-skin="primary"> 
                                        <input type="checkbox" lay-filter="unify-checkbox" value="" data-value="2" data-type="showPage" name="showPage[order]" title="点餐页" lay-skin="primary"> 
                                        <input type="checkbox" lay-filter="unify-checkbox" value="" data-value="3" data-type="showPage" name="showPage[list]" title="订单列表" lay-skin="primary"> 
                                        <input type="checkbox" lay-filter="unify-checkbox" value="" data-value="4" data-type="showPage" name="showPage[my]" title="我的" lay-skin="primary"> 
                                    </div>
                                </div>
                                <div class="layui-inline show-range-js" style="display: none;margin-bottom:10px;">
                                    <label class="layui-form-label">选择可显示范围</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" name="showRange[in]" title="堂食" lay-skin="primary"> 
                                        <input type="checkbox" name="showRange[out]" title="外卖" lay-skin="primary"> 
                                    </div>
                                </div>
                                <div class="layui-inline show-range-js" style="display: none;margin-bottom:10px;">
                                    <label class="layui-form-label">可显示门店设置</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" lay-filter="unify-radio" data-value="1" data-type="showShopSet" name="showShopSet" value="" title="全部">
                                        <input type="radio" lay-filter="unify-radio" data-value="2" data-type="showShopSet" name="showShopSet" value="" title="部分门店">
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal sectional-btn-js" style="display: none;">+添加门店</button>
                                    </div>
                                </div>

                            </div>
                            <div class="can-use-shop-table sectional-btn-js" style="display: none;">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline" style="width:200px;">
                                        <input type="text" class="layui-input" placeholder="所属组织">
                                    </div>
                                    <div class="layui-input-inline" style="width:200px;">
                                        <input type="text" class="layui-input" placeholder="服务范围">
                                    </div>
                                    <div class="layui-input-inline" style="width:200px;">
                                        <input type="text" class="layui-input" placeholder="请输入门店名称">
                                    </div>
                                    <div class="layui-input-inline" style="width:60px;">
                                        <button class="layui-btn layui-btn-normal">查询</button>
                                    </div>
                                </div>
                                <div>
                                    <table id="canUseShopTable" lay-filter="canUseShopTable"></table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                <div class="layui-inline" style="margin-bottom:10px;">
                                    <label class="layui-form-label">浮窗大小</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="layerSize" value="" data-value="1" lay-filter="unify-radio" data-type="layerSizeSet" title="120px * 120px （适用领券入口）">
                                        <input type="radio" name="layerSize" value="" data-value="2" lay-filter="unify-radio" data-type="layerSizeSet" title="210px * 240px （适用活动入口）">
                                        <input type="radio" name="layerSize" value="" data-value="3" lay-filter="unify-radio" data-type="layerSizeSet" title="750px * 1334px （ 大弹窗效果 ）">
                                        <input type="radio" name="layerSize" value="" data-value="4" lay-filter="unify-radio" data-type="layerSizeSet" title="自定义宽高">
                                    </div>
                                </div>
                                <div class="layui-inline layer-set-width-js"  style="margin-bottom:20px;display:none;">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-form-mid">指定宽度</div>
                                    <div class="layui-input-inline"style="width:140px;">
                                        <input class="layui-input unify-input" data-type="setWidth"></input>
                                    </div>
                                    <div class="layui-form-mid">px <span class="gray">(最大750px，最小50px)</span></div>
                                </div>
                                <div class="layui-inline layer-set-height-js"  style="margin-bottom:20px;display:none;">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-form-mid">指定高度</div>
                                    <div class="layui-input-inline"style="width:140px;">
                                        <input class="layui-input unify-input" data-type="setHeight"></input>
                                    </div>
                                    <div class="layui-form-mid">px <span class="gray">(最大1334px，最小50px)</span></div>
                                </div>
                                <div class="layui-inline"  style="margin-bottom:20px;">
                                    <label class="layui-form-label">浮窗图片设置</label>
                                    <div class="layui-input-inline" style="width:80px;">
                                        <button class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top:4px;">上传图片</button>
                                    </div>
                                    <div class="layui-form-mid gray">建议格式：.png、.jpg、.jpge、.gif</div>
                                </div>
                                <div class="layui-inline"  style="margin-bottom:10px;">
                                    <label class="layui-form-label">跳转链接设置</label>
                                    <div class="layui-input-inline" style="width:80px;">
                                        <button class="layui-btn layui-btn-primary layui-btn-sm choose-link" style="margin-top:4px;">选择链接</button>
                                    </div>
                                </div>
                                <div class="layui-inline"  style="margin-bottom:10px;">
                                    <label class="layui-form-label">关闭浮窗按钮</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="layerCloseBtn" value="" data-value="1" lay-filter="unify-radio" data-type="layerCloseBtn" title="显示">
                                        <input type="radio" name="layerCloseBtn" value="" data-value="0" lay-filter="unify-radio" data-type="layerCloseBtn" title="隐藏">
                                    </div>
                                </div>
                                <div class="layui-inline close-layer-btn-js"  style="margin-bottom:10px;display:none;">
                                    <label class="layui-form-label">关闭按钮显示位置</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="layerCloseBtnPosition" value="1" lay-filter="unify-radio" data-type="layerCloseBtnPosition" data-value="1" title="右上角">
                                        <input type="radio" name="layerCloseBtnPosition" value="2" lay-filter="unify-radio" data-type="layerCloseBtnPosition" data-value="2" title="悬浮下方">
                                    </div>
                                </div>
                                <div class="layui-inline"  style="margin-bottom:10px;">
                                    <label class="layui-form-label">滑动半隐藏效果</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="layerSlideHalfHide" value="1" title="开启">
                                        <input type="radio" name="layerSlideHalfHide" value="2" title="关闭">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
            </div>
          </form>
        </div>
    </div>
</body>
<!-- 添加会员群体弹窗的模板 -->
<script type="text/html" id="addMemberGroupTemplate">
    <div class="member-popup-wrap">
      <p>会员群体选择</p>
      <p>只允许单个会员群体的会员参与本次活动</p>
      <div id="addMemberGroupWrap" class="add-member-group-wrap">
    
      </div>
    </div>
</script>
<script src="../../js/jquery.min.js"></script>
<script src="../../layui/layui.js"></script>
<script src="./popUpAd.js"></script>
</html>